<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <el-dialog v-if="props.addVisible" v-model="props.addVisible" :title="props.operateType == 'Add' ? '新建模型对比' : '模型对比详情'" width="1400px" append-to-body :before-close="closeDialog">
    <div v-loading="loading">
      <h3 class="compare-title"><span class="title">对比方式</span></h3>
      <div class="radio-choose">
        <div v-if="props.operateType === 'View'" class="compare-type__name">
          {{ compareType == 'model' ? '全机模型对比' : '部段模型对比'}}
        </div>
        <el-radio-group v-else v-model="compareType" @change="compareTypeChange">
          <el-radio value="model" size="small">全机模型对比</el-radio>
          <el-radio value="section" size="small">部段模型对比</el-radio>
        </el-radio-group>
      </div>
      <h3 class="compare-title"><span class="title">对比对象</span></h3>
      <div class="compare-card">
        <el-row :gutter="6">
          <el-col :span="11" class="custom-margin"> 
            <el-card>
              <template #header>
                <div class="card-header">
                  <span class="title">需要对比的模型文件</span>
                </div>
              </template>
              <el-form ref="referencedObjectRef" :model="referencedObject" :rules="rules1" size="small" label-width="120">
                <el-form-item label="机型：" prop="modelNumber">
                  <span v-if="props.operateType === 'View'">{{ referencedObject.modelNumber }}</span>
                  <el-select v-else style="width: 480px" v-model="referencedObject.modelNumber" clearable placeholder="请选择" @change="modelChange($event, 2)">
                    <el-option v-for="item in modelList" :label="item.name" :value="item.mark" :key="item.mark"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="批次号：" prop="batchNumber">
                  <span v-if="props.operateType === 'View'">{{ referencedObject.batchNumber }}</span>
                  <el-select v-else style="width: 480px" v-model="referencedObject.batchNumber" clearable placeholder="请选择" @change="batchChange($event, 2)">
                    <el-option v-for="(item, index) in referencedBatchList" :label="referencedBatchList[index]" :value="referencedBatchList[index]" :key="index"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item v-if="compareType === 'section'" label="部件名称：" prop="sectionNumber">
                  <span v-if="props.operateType === 'View'">{{ referencedObject.sectionNumber }}</span>
                  <el-select v-else style="width: 480px" v-model="referencedObject.sectionNumber" clearable placeholder="请选择" @change="sectionChange($event, 2)">
                    <!-- <el-option v-for="item in referencedSectionList" :label="item.fileName" :value="item.fileUrl" :key="item._id">
                      <span style="float: left">{{ item.importRecord && item.importRecord.updateTime }}</span>
                        <span
                          style="
                            float: right;
                            color: #909399;
                            font-size: 13px;
                          "
                        >
                          {{ item.fileName }} - {{ item.fileSize}}KB
                        </span>
                    </el-option> -->
                    <el-option v-for="(item, index) in referencedSectionList" :label="referencedSectionList[index]" :value="referencedSectionList[index]" :key="index"></el-option>
                  </el-select> 
                </el-form-item>
                <el-form-item label="模型文件：" prop="filePath">
                  <span v-if="props.operateType === 'View'">{{ referencedObject.fileName }}</span>
                  <el-select v-else style="width: 480px" v-model="referencedObject.filePath" clearable placeholder="请选择" @change="fileChange($event, 2)">
                    <el-option v-for="item in referencedFileList" :label="item.fileName" :value="item.fileUrl" :key="item._id">
                      <span style="float: left">{{ item.fileName }}</span>
                        <span
                          style="
                            float: right;
                            color: #909399;
                            font-size: 13px;
                          "
                        >
                          {{ item.uploadTimeStr }} - {{ item.fileSize}}KB
                        </span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
          <el-col :span="2">
            <div class="bold-text">
              <div class="vs">VS</div>
            </div>
          </el-col>
          <el-col :span="11">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span class="title">对比对象（参照物）</span>
                </div>
              </template>
              <el-form ref="comparedObjectRef" :model="comparedObject" :rules="rules2" size="small" label-width="120">
                <el-form-item label="机型：" prop="modelNumber">
                  <span v-if="props.operateType === 'View'">{{ comparedObject.modelNumber }}</span>
                  <el-select v-else style="width: 480px" v-model="comparedObject.modelNumber" clearable placeholder="请选择" @change="modelChange($event, 1)">
                    <el-option v-for="item in modelList" :label="item.name" :value="item.mark" :key="item.mark"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="批次号：" prop="batchNumber">
                  <span v-if="props.operateType === 'View'">{{ comparedObject.batchNumber }}</span>
                  <el-select v-else style="width: 480px" v-model="comparedObject.batchNumber" clearable placeholder="请选择" @change="batchChange($event, 1)">
                    <el-option v-for="(item, index) in comparedBatchList" :label="comparedBatchList[index]" :value="comparedBatchList[index]" :key="index"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item v-if="compareType === 'section'" label="部件名称：" prop="sectionNumber">
                  <span v-if="props.operateType === 'View'">{{ comparedObject.sectionNumber }}</span>
                  <el-select v-else style="width: 480px" v-model="comparedObject.sectionNumber" clearable placeholder="请选择" @change="sectionChange($event, 1)">
                    <!-- <el-option v-for="item in comparedSectionList" :label="item.name + '[' + item.mark + ']'" :value="item.mark" :key="item.mark"></el-option> -->
                    <!-- <el-option v-for="item in comparedSectionList" :label="item.fileName" :value="item.fileUrl" :key="item._id">
                      <span style="float: left">{{ item.importRecord && item.importRecord.updateTime }}</span>
                        <span
                          style="
                            float: right;
                            color: #909399;
                            font-size: 13px;
                          "
                        >
                          {{ item.fileName }} - {{ item.fileSize}}KB
                        </span>
                    </el-option> -->
                    <el-option v-for="(item, index) in comparedSectionList" :label="comparedSectionList[index]" :value="comparedSectionList[index]" :key="index"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="模型文件：" prop="filePath">
                  <span v-if="props.operateType === 'View'">{{ comparedObject.fileName }}</span>
                  <el-select v-else style="width: 480px" v-model="comparedObject.filePath" clearable placeholder="请选择" @change="fileChange($event, 1)">
                    <!-- <el-option v-for="item in comparedFileList" :label="item.fileName" :value="item.fileUrl" :key="item._id"></el-option> -->
                    <el-option v-for="item in comparedFileList" :label="item.fileName" :value="item.fileUrl" :key="item._id">
                      <span style="float: left">{{ item.fileName }}</span>
                        <span
                          style="
                            float: right;
                            color: #909399;
                            font-size: 13px;
                          "
                        >
                          {{ item.uploadTimeStr }} - {{ item.fileSize}}KB
                        </span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <h3 v-if="props.operateType === 'View'" class="compare-title"><span class="title">对比结果</span></h3>
      <div v-if="props.operateType === 'View' && props.compareStatus == 'completed' && hasCompareRes" class="compare-result compare-card">
        <!-- <el-button type="primary" @click="loadCompareResultExcel">加载对比结果</el-button> -->
        <el-button type="primary" @click="downloadCompareResultExcel">下载对比结果</el-button>
      </div>
      <div style="text-align:center;" v-if="props.compareStatus == 'completed' && !hasCompareRes">
        暂无差异数据！
      </div>
      <el-tabs v-if="compareRes && props.compareStatus == 'completed' && hasCompareRes" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane name="first">
          <template #label>
              <span class="custom-tabs-label">
                <el-icon style="color:#E6A23C;" :size="18"><WarningFilled /></el-icon>
                <span>数据差异</span>
              </span>
            </template>
          <div v-if="compareRes && compareRes.jsonData3 && compareRes.jsonData3.length > 0">
            <ul class="compare-table__header total">
              <li class="th">对比模型文件内容</li>
              <li class="th">文件名称</li>
              <li class="th">行数</li>
              <li class="th">对比对象文件内容</li>
              <li class="th">文件名称</li>
              <li class="th">行数</li>
            </ul>
            <InfiniteList
              :data="compareRes.jsonData3"
              :width="'100%'"
              :itemSize="50"
              :height="500"
              :debug="false"
              v-slot="{ item, index }"
              >
              <ul class="compare-table__content total">
                <li class="td">{{ item['对比模型文件内容'] }}</li>
                <li class="td">{{ item['数据所在文件名称'] }}</li>
                <li class="td">{{ item['数据所在行数'] }}</li>
                <li class="td">{{ item['对比对象文件内容'] }}</li>
                <li class="td">{{ item['数据所在文件名称_1'] }}</li>
                <li class="td">{{ item['数据所在行数_1'] }}</li>
              </ul>
            </InfiniteList>
          </div>
          <!-- <div style="text-align:center;" v-else>
            暂无差异数据！
          </div> -->
        </el-tab-pane>
        <el-tab-pane name="third">
          <template #label>
            <span class="custom-tabs-label">
              <el-icon style="color:rgba(194, 128, 255, 1);" :size="18"><WarningFilled /></el-icon>
              <span>新增的数据</span>
            </span>
          </template>
          <div v-if="compareRes && compareRes.jsonData1 && compareRes.jsonData1.length > 0">
            <ul class="compare-table__header single">
              <li class="th">对比模型文件内容</li>
              <li class="th">文件名称</li>
              <li class="th">行数</li>
            </ul>
            <InfiniteList
              :data="compareRes.jsonData1"
              :width="'100%'"
              :itemSize="50"
              :height="500"
              :debug="false"
              v-slot="{ item, index }"
              >
              <ul class="compare-table__content single">
                <li class="td" style="white-space: pre-line;">{{ item['对比模型文件内容'] }}</li>
                <li class="td">{{ item['数据所在文件名称'] }}</li>
                <li class="td">{{ item['数据所在行数'] }}</li>
              </ul>
            </InfiniteList>
          </div>
          <!-- <div style="text-align:center;" v-else>
            暂无差异数据！
          </div> -->
        </el-tab-pane>
        <el-tab-pane name="second">
          <template #label>
            <span class="custom-tabs-label">
              <el-icon style="color:red;" :size="18"><WarningFilled /></el-icon>
              <span>已删除的数据</span>  
            </span>
          </template>
          <div v-if="compareRes && compareRes.jsonData2 && compareRes.jsonData2.length > 0">
            <ul class="compare-table__header single">
              <li class="th">对比对象文件内容</li>
              <li class="th">文件名称</li>
              <li class="th">行数</li>
            </ul>
            <InfiniteList
              :data="compareRes.jsonData2"
              :width="'100%'"
              :itemSize="50"
              :height="500"
              :debug="false"
              v-slot="{ item, index }"
              >
              <ul class="compare-table__content single">
                <li class="td">{{ item['对比对象文件内容'] }}</li>
                <li class="td">{{ item['数据所在文件名称_1'] }}</li>
                <li class="td">{{ item['数据所在行数_1'] }}</li>
              </ul>
            </InfiniteList>
          </div>
          <!-- <div style="text-align:center;" v-else>
            暂无差异数据！
          </div> -->
        </el-tab-pane>
      </el-tabs>
      <el-text v-if="props.compareStatus == 'failed'"  style="text-align: center;" class="mx-2" type="danger">对比失败，请联系管理人员</el-text>
    </div>
    <template #footer>
      <div class="dialog-footer" style="text-align: center;">
        <el-button size="small" @click="closeDialog">返回</el-button>
        <el-button v-if="props.operateType !== 'View'" size="small" type="primary" @click="startCompare">开始对比</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="AllFileView">
import InfiniteList from 'vue3-infinite-list';
import * as XLSX from 'xlsx';
import { downloadFile } from '@/utils/index';
import { 
  getAllFileList, 
  getModelFilesByCategory, 
  getMeshModelStructureList, 
  getBatchNo, 
  addCompareTask, 
  getCompareDetail, 
  downloadBdfCompareResult,
  getBdfCompareBase64Result
} from '@/api/dataAcquisition';
const emit = defineEmits(['handleEvent']);
const loading = ref(false);
const props = defineProps(['addVisible', 'compareRecordId', 'operateType', 'compareStatus']);
const treeData = ref([]);
const modelNumber = ref('');
const batchNumber = ref('');
const compareType = ref('model');
const modelList = ref([]);
const comparedBatchList = ref([]);
const comparedSectionList = ref([]);
const comparedFileList = ref([]);
const referencedModelList = ref([]);
const referencedBatchList = ref([]);
const referencedSectionList = ref([]);
const referencedFileList = ref([]);
const sectionList = ref([]);
const batchList = ref([]);
const compareResult = ref({});
const referencedObjectRef = ref(null);
const comparedObjectRef = ref(null);
const activeName = ref('first');
const compareRes = ref(null);
const hasCompareRes = ref(false); // 判断是否存在对比结果
const comparedObject = ref({
  modelNumber: '',
  batchNumber: '',
  sectionNumber: '',
  filePath: ''
})
const referencedObject = ref({                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
  modelNumber: '',
  batchNumber: '',
  sectionNumber: '',
  filePath: ''
})
const rules1 = ref({
  modelNumber: [
    { required: true, message: '请选择机型', trigger: 'change' },
  ],
  batchNumber: [          
    { required: true, message: '请选择批次号', trigger: 'change' },                           
  ],
  sectionNumber: [          
    { required: true, message: '请选择部段', trigger: 'change' },                           
  ],
  filePath: [          
    { required: true, message: '请选择文件', trigger: 'change' },                           
  ],
});     
const rules2 = ref({
  modelNumber: [
    { required: true, message: '请选择机型', trigger: 'change' },
  ],
  batchNumber: [          
    { required: true, message: '请选择批次号', trigger: 'change' },                           
  ],
  sectionNumber: [          
    { required: true, message: '请选择部段', trigger: 'change' },                           
  ],
  filePath: [          
    { required: true, message: '请选择文件', trigger: 'change' },                           
  ],
});  
const modelChange = (value, type, reset = true) => {
  if (value) {
    if (reset) {
      if (type === 1) {
        comparedObject.value.batchNumber = '';
        comparedObject.value.sectionNumber = '';
        comparedObject.value.filePath = '';
        comparedBatchList.value = [];
        comparedSectionList.value = [];
        comparedFileList.value = [];
      } else {
        referencedObject.value.batchNumber = '';
        referencedObject.value.sectionNumber = '';
        referencedObject.value.filePath = '';
        referencedBatchList.value = [];
        referencedSectionList.value = [];
        referencedFileList.value = [];
      }
    }
    getBatchNo({modelNumber: value}).then(res => {
      if (res) {
        if (type === 1) {
          comparedBatchList.value = res.data;
        } else {
          referencedBatchList.value = res.data;
        }
      }
    })
  }
}
const batchChange = (value, type, reset = true) => {
  if (value) {
    if (reset) {
      if (type === 1) {
        comparedObject.value.sectionNumber = '';
        comparedObject.value.filePath = '';
        comparedSectionList.value = [];
        comparedFileList.value = [];
      } else {
        referencedObject.value.sectionNumber = '';
        referencedObject.value.filePath = '';
        referencedSectionList.value = [];
        referencedFileList.value = [];
      }
    }
    getModelFilesByCategory( {
      modelNumber: type == 1 ? comparedObject.value.modelNumber : referencedObject.value.modelNumber,
      batchNumber: value,
      pageQuery: {
        pageNum:1,
        pageSize:9999
      }
    }).then(res => {
      if (res) {
        console.log('res',  res, compareType.value)
        if (type === 1) {
          if (compareType.value == 'model') {
            comparedFileList.value = res.rows.filter(item => item.fileName.toLowerCase().indexOf('model') > -1);
          } else {
            comparedSectionList.value = [...new Set(res.rows.filter(item => item.sectionNumber).map(item => item.sectionNumber))];
          }
        } else {
          if (compareType.value == 'model') {
            referencedFileList.value = res.rows.filter(item => item.fileName.toLowerCase().indexOf('model') > -1);
          } else {
            referencedSectionList.value = [...new Set(res.rows.filter(item => item.sectionNumber).map(item => item.sectionNumber))];
          }
        }
        console.log('res',  referencedFileList.value)
      }
      //     compareType.value == 'model' ? referencedFileList.value = res.rows : referencedSectionList.value = res.rows;
      //   } else {
      //     compareType.value == 'model' ? comparedFileList.value = res.rows : comparedSectionList.value = res.rows;
      //   }
      //   console.log('res',  referencedFileList.value)
      // }
    })
  } 
}
const sectionChange = (value, type, reset = true) => {
  if (value) {
    if (reset) {
      if (type === 1) {
        comparedObject.value.filePath = '';
        comparedFileList.value = [];
      } else {
        referencedObject.value.filePath = '';
        referencedFileList.value = [];
      }
    }
    getModelFilesByCategory( {
      modelNumber: type == 1 ? comparedObject.value.modelNumber : referencedObject.value.modelNumber,
      batchNumber: type == 1 ? comparedObject.value.batchNumber : referencedObject.value.batchNumber,
      sectionNumber: value,
      pageQuery: {
        pageNum:1,
        pageSize:9999
      }
    }).then(res => {
      if (res) {
        if (type === 1) {
          comparedFileList.value = res.rows.filter(item => item.fileName.toLowerCase().indexOf('model') == -1);
        } else {
          referencedFileList.value = res.rows.filter(item => item.fileName.toLowerCase().indexOf('model') == -1);
        }
      }
    })
  } 
}
const fileChange = (value, type) => {
  if (value) {
    if (type === 1) {
      let fItem = comparedFileList.value.find(item => item.fileUrl === value);
      if (fItem) {
        comparedObject.value.filePath = value;
        comparedObject.value.uploadTime = fItem?.importRecord?.updateTime;
        comparedObject.value.fileName = fItem?.fileName;
      }
    } else {
      let fItem = referencedFileList.value.find(item => item.fileUrl === value);
      if (fItem) {
        referencedObject.value.filePath = value;
        referencedObject.value.uploadTime = fItem?.importRecord?.updateTime;
        referencedObject.value.fileName = fItem?.fileName;
      }
    }
  }
}
const compareTypeChange = () => {
  // 新建模型对比页面，对比对象一栏填写完成后，再切换对比方式时，建议模型文件和部段输入框清空，不然会创建出全机对比+部段文件的对比
  comparedObject.value.batchNumber = '';
  comparedObject.value.sectionNumber = '';
  comparedObject.value.filePath = '';
  referencedObject.value.batchNumber = '';
  referencedObject.value.sectionNumber = '';
  referencedObject.value.filePath = '';
}
const handleClick = () => {}      
const closeDialog = () => {
  emit('handleEvent', {type: 'cancel'});
};
const getAllModel = () => {
  getMeshModelStructureList({parentId: 0, pageSize: 999}).then(res => {
    if (res) {
      modelList.value = res.rows;
    }
  })
}
const startCompare = async () => {
  let flag1 = await referencedObjectRef.value.validate();
  let flag2 = await comparedObjectRef.value.validate();
  if (!flag1 || !flag2) {
    return;
  }
  loading.value = true;
  let params = {
    id: props.compareRecordId,
    type: compareType.value,
    comparedObject: comparedObject.value,
    referencedObject: referencedObject.value,
  }
  addCompareTask(params).then(res => {
    loading.value = false;
    if (res) {
      ElMessage({ showClose: true, message: '模型对比任务创建成功', type: 'success' });
      emit('handleEvent', {type: 'refresh'});
    } 
  }).catch(e => {
    loading.value = false;
  }).finally(() => {
    loading.value = false;
  });
}
// 获取对比详情
const getModelCompareDetail = () => {
  loading.value = true;
  getCompareDetail({_id: props.compareRecordId}).then(res => {
    if (res) {
      loading.value = false;
      console.log('res', res)
      loading.value = false;
      referencedObject.value = res.data.referencedObject;
      comparedObject.value = res.data.comparedObject;
      compareType.value = res.data.type;
      compareResult.value = res.data.compareResult;
    }
  }).catch(e => {
    loading.value = false;
  }).finally(() => {
    loading.value = false;
  });
}
const downloadCompareResultExcel = () => {
  downloadBdfCompareResult({ _id: props?.compareRecordId}).then((res) => {
    if (res?.code === 500) {
      ElMessage({ showClose: true, message: '下载失败。', type: 'error' });
      return;
    }
    downloadFile(res, referencedObject.value.fileName + '_vs_' + comparedObject.value.fileName + '对比结果', 'xlsx');
  }).catch(() => {
    loading.value = false;
  })
}
const loadCompareResultExcel = () => {  
  loading.value = true;
  getBdfCompareBase64Result({ _id: props?.compareRecordId}).then((res) => {
    if (res?.code === 500) {
      ElMessage({ showClose: true, message: '下载失败。', type: 'error' });
      loading.value = false;
      return;
    }
    // downloadFile(res, referencedObject.value.fileName + '_vs_' + comparedObject.value.fileName + '对比结果', 'xlsx');
    if (res.code == 200) {
      const base64String = res.msg;
      const binaryString = atob(base64String); // 去掉Base64前缀（如data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,）
      const binaryLength = binaryString.length;
      const bytes = new Uint8Array(binaryLength);
      for (let i = 0; i < binaryLength; i++) {
          bytes[i] = binaryString.charCodeAt(i);
      }

      // 使用XLSX库解析Excel文件
      const workbook = XLSX.read(bytes, { type: 'array' });

      // 获取第一个工作表的名称
      // 0 - 对比模型没有， 对比对象有
      // 1 - 对比模型有，对比对象没有
      // 2 - 对比双方数据存在差异
      const firstSheetName = workbook.SheetNames[0];
      const secondSheetName = workbook.SheetNames[1];
      const thirdSheetName = workbook.SheetNames[2];
      

      // 将工作表转换为JSON数据
      const jsonData1 = XLSX.utils.sheet_to_json(workbook.Sheets[firstSheetName]);
      const jsonData2 = XLSX.utils.sheet_to_json(workbook.Sheets[secondSheetName]);
      const jsonData3 = XLSX.utils.sheet_to_json(workbook.Sheets[thirdSheetName]);
      console.log(jsonData1); // 输出JSON格式的数据
      console.log(jsonData2); 
      console.log(jsonData3); 
      if ((!jsonData1 || jsonData1.length == 0) && (!jsonData2 || jsonData2.length == 0) && (!jsonData3 || jsonData3.length == 0)) {
        hasCompareRes.value = false;
      } else {
        hasCompareRes.value = true;
      }
      compareRes.value = {
        jsonData1,
        jsonData2,
        jsonData3
      }
      loading.value = false;
    }
  }).catch(() => {
    loading.value = false;
  })
}

onMounted(() => {
  getAllModel();
  // downCompareResultExcel();
  props?.compareRecordId && getModelCompareDetail();
  props?.compareRecordId && props.compareStatus == 'completed' && loadCompareResultExcel();
});
</script>

<style lang="scss" scoped>
.radio-choose {
  padding: 10px 0;
}
.compare-card {
  .color-mark {
    padding: 10px 0;
    display: flex;
    justify-content: space-around;
    .color-mark__item {
      padding: 5px 10px;
      font-size: 14px;
      &.modified {
        background: #E6A23C;
        // color: #fff;
      }
      &.added {
        background: rgba(255,0,0,0.3);;
        // color: #fff;
      }
      &.removed {
        background: rgba(194, 128, 255, 1);
        // color: #fff;
      }
    }
  }
  .title {
    font-weight: 600;
    font-size: 16px;
  }
  .bold-text {
    display: flex;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    align-items: center;
    .vs {
      height: 80px;
      width: 80px;
      line-height: 80px;
      text-align: center;
      font-weight: bold;
      font-size: 40px;
      color: #ffffff;
      background: #409EFF;
      border-radius: 10px;
      text-shadow: 2px 2px 4px #000000;
    }
  }
}
.compare-title {
  .title {
    font-size: 18px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    &::before {
      content: "";
      display: inline-block;
      width: 5px;
      height: 16px;
      margin-right: 5px;
      background-color: #409EFF;
      vertical-align: middle;
      margin-top: -3px;
    }
  }
}
.compare-result {
  ul,li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .modified {
    background: #E6A23C;
    color: #fff;
  }
  .added {
    background: rgba(255,0,0,0.3);
  }
  .removed {
    background: rgba(194, 128, 255, 1);
  }
}
.compare-table__header {
  display: flex;
  align-items: center;
  // border-left: 1px solid #ebeef5;
  // border-bottom: 1px solid #ebeef5;
  font-weight: 600;
  font-size: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
  .th {
    // flex: 1;
    text-align: center;
    padding: 5px 10px;
    border-right: 1px solid #ebeef5;
    border-top: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    background: #f8f8f9;
    color: #515a6e;
  }
  
}
.single {
  .th, .td {
    &:nth-child(1) {
      width: 700px;
      border-left: 1px solid #ebeef5;
    }
    &:nth-child(2) {
      width: 500px;
    }
    &:nth-child(3) {
      width: 120px;
    }
  }
}
.total {
  .th, .td {
    &:nth-child(1) {
      width: 400px;
      border-left: 1px solid #ebeef5;
    }
    &:nth-child(2) {
      width: 170px;
    }
    &:nth-child(3) {
      width: 90px;
    }
    &:nth-child(4) {
      width: 400px;
    }
    &:nth-child(5) {
      width: 170px;
    }
    &:nth-child(6) {
      width: 90px;
    }
  }                                                                                                                     
  
}
.compare-table__content {
  display: flex;
  // align-items: center;
  // border-top: 1px solid #ebeef5;
  // border-bottom: 1px solid #ebeef5;
  font-weight: 400;
  font-size: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
  // white-space: pre-line;
  .td {
    // flex: 1;
    text-align: left;
    padding: 5px 10px;
    border-right: 1px solid #ebeef5;
    height: 50px;
    border-bottom: 1px solid #ebeef5;
    white-space: pre-wrap;
  }
}
.custom-tabs-label {
  display: flex;
  align-items: center;
  i {
    margin-right: 3px;
  }
}
</style>
